<template>
  <div
    class="cockpit-header"
    :style="single ? 'height: 9.3%' : 'height: 300px'"
    @click.stop
  >
    <canvas
      v-if="single"
      class="canvas"
      id="pag-single-header"
      style="z-indx: 2"
    ></canvas>
    <canvas
      v-if="!single"
      class="canvas"
      id="pag-header"
      style="z-indx: 2"
    ></canvas>
    <div :class="single ? 'singleHeader' : 'header'">
      <div
        class="weather"
        :style="
          single
            ? 'margin-top: 11px;font-size: 14px;justify-content: normal;'
            : 'margin-top: 30px;font-size: 24px;'
        "
      >
        <div class="city">杭州市</div>
        <div
          class="temp"
          :style="
            single
              ? 'margin-left: 30px;font-size: 14px;justify-content: normal;'
              : ''
          "
        >
          <span>{{ condition }}</span>
          <span :style="single ? 'margin-left: 30px;font-size: 14px;' : ''">{{
            temperature
          }}</span>
        </div>
      </div>
      <div :class="single ? 'singleTitle' : 'title'">无人机在线管理系统</div>
      <div
        class="time"
        :style="
          single
            ? 'margin: 12px 102px 0 0;font-size: 14px; width:292px;display: inline-block;'
            : 'margin: 30px 65px 0 0;font-size: 20px;'
        "
      >
        <div class="date" :style="single ? 'width:140px; float: left;' : ''">
          {{ nowTime }}
        </div>
        <div
          class="week"
          :style="single ? 'float: left;margin-left: 30px;' : ''"
        >
          {{ weekend }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Header",
};
</script>
<script setup>
import { dataFormat } from "@/utils/format";
import { getTemperature } from "@/api/cockpit/meteorological";
import { PAGInit } from "libpag";
import { onMounted, ref } from "vue";
const props = defineProps({
  single: {
    type: Boolean,
    default: false,
  },
});

let nowTime = ref();
let weekend = ref();
let temperature = ref();
const week = ref();
let pagView = null;
let condition = ref();

function initialization() {
  PAGInit().then((PAG) => {
    let url = null;
    if (props.single) {
      url = import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/single-header2.pag";
    } else {
      url = import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/header2.pag";
    }
    fetch(url)
      .then((response) => response.blob())
      .then(async (blob) => {
        const file = new window.File(
          [blob],
          url.replace(/(.*\/)*([^.]+)/i, "$2")
        );
        const pagFile = await PAG.PAGFile.load(file);
        let canvas = null;
        if (props.single) {
          canvas = document.getElementById("pag-single-header");
        } else {
          canvas = document.getElementById("pag-header");
        }
        // 解决清晰度问题
        canvas.width = pagFile.width() * window.devicePixelRatio;
        canvas.height = pagFile.height() * window.devicePixelRatio;
        console.log("pagFile", pagFile);
        // 自适应
        pagView = await PAG.PAGView.init(pagFile, canvas, {
          useScale: false,
        });
        // 高清渲染
        // pagView = await PAG.PAGView.init(pagFile, "#pag");
        canvas.style.zIndex = 1;
        pagView.setRepeatCount(0);
        await pagView.play();
      });
  });
}

let gettime = null;
function formatCurrentTime(date) {
  // 获取当前时间并打印
  const yy = date.getFullYear();
  const mm = date.getMonth() + 1;
  const dd = date.getDate();
  const hh = date.getHours();
  const mf =
    date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  const ss =
    date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  gettime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
  return gettime;
}

function currentDateTime(date) {
  let year = date.getFullYear(); // 年份
  let month = String(date.getMonth() + 1).padStart(2, "0"); // 月份（注意月份从0开始）
  let day = String(date.getDate()).padStart(2, "0"); // 天数
  let hours = String(date.getHours()).padStart(2, "0"); // 小时
  let minutes = String(date.getMinutes()).padStart(2, "0"); // 分钟
  let seconds = String(date.getSeconds()).padStart(2, "0"); // 秒数

  const weekday = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ]; // 定义星期名称数组
  const weekIndex = date.getDay(); // 获取星期索引值（0-6，其中0为周日）
  const weekName = weekday[weekIndex]; // 根据索引值获取对应的星期名称
  return weekName; // 返回格式化后的日期和时间字符串
}

function getNowTime() {
  const date = new Date();
  nowTime.value = formatCurrentTime(date);
  weekend.value = currentDateTime(date);
}

// 获取杭州的天气--温度
function getHZWeather() {
  let list = ["1185"];
  getTemperature(list).then((res) => {
    if (res.length > 0) {
      temperature.value = res[0].data.condition.temp + "℃";
      condition.value = res[0].data.condition.condition;
    }
  });
}

onMounted(() => {
  getNowTime();
  setInterval(() => {
    getNowTime(); // 每秒更新一次时间
  }, 1000);
  initialization();
  // getHZWeather();
});
</script>

<style lang="scss" scoped>
.cockpit-header {
  position: absolute;
  top: 0;
  width: 100%;
  // height: 300px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  z-index: 10;
  pointer-events: none;
  padding: 0 20px;

  canvas {
    width: 100%;
    display: block;
    margin: 0 auto;
  }

  .singleHeader {
    position: absolute;
    top: 0;
    left: 1.4%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    // margin-left: 40px;
    width: 95.2%;
    height: 100%;
    // background-image: url("/img/cockpit/single-header.png");
    // background-color: transparent;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center top;
    color: #0096ff;
    z-index: 10;
  }

  .header {
    position: absolute;
    top: 0;
    left: 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    // margin-left: 40px;
    width: 3761px;
    height: 100%;
    //background-image: url("/img/cockpit/header.pag");
    // background-color: transparent;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center top;
    color: #0096ff;
    z-index: 10;
  }

  .title {
    margin-top: 0.6%;
    //margin-top: 19px;
    width: 647px;
    height: 42px;
    line-height: 42px;
    font-size: 42px;
    text-align-last: justify;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #00dfff;
    background: linear-gradient(0deg, #9df7ff 0%, #03a1b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .singleTitle {
    margin-top: 3px;
    // margin-left: 92px;
    width: 619px;
    height: 42px;
    line-height: 42px;
    font-size: 30px;
    letter-spacing: 10px;
    text-align-last: center;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #00dfff;
    background: linear-gradient(0deg, #9df7ff 0%, #03a1b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    //margin-top: 29px;
    //margin-right: 65px;
    width: 337px;
    height: 20px;
    // font-size: 20px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #00dfff;
  }

  .weather {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 11px;
    margin-left: 81px;
    width: 361px;
    height: 23px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #00dfff;

    .temp {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 187px;
      height: 20px;
      line-height: 20px;
      font-size: 20px;
      font-weight: 400;
    }
  }
}
</style>
